<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的网站演示</title>
<style>
* { margin: 0; padding: 0;}
a{color: #000000;text-decoration: none;}
a:hover{color: #FF0000;}

.mytitle{text-align: center;}
#dowebok { width: 90%; margin: 0 auto; font-size: 14px;}
#dowebok li { float: left; width: 30%; margin-left: 1%; padding-top: 1%;}
#dowebok li img {
    width:500px;
    height:250px;
}
#dowebok li .dt { width: 100%;text-align: center;}
#dowebok li{list-style-type: none;}
</style>
</head>

<body>
	<h1 class="mytitle">199010232&nbsp;&nbsp;甘牧霖</h1>
	<ul id="dowebok">
		<li>
			<div><a href="chongqing/index.html"><img src="./img2/zuoye1.png" alt=""></a></div>
			<div class="dt"><a href="chongqing/index.html">作品1 :使用Vue指令实现下拉菜单效果</a></div>
		</li>
		<li>
			<div><a href="xiaomi/index.html"><img src="./img2/zuoye2.png" alt=""></a></div>
			<div class="dt"><a href="xiaomi/index.html">作品2:使用Vue指令实现数据展示</a></div>
		</li>
        <li>
			<div><a href="shopping/index.html"><img src="./img2/zuoye3.png" alt=""></a></div>
			<div class="dt"><a href="shopping/index.html">作品3:使用计算属性实现购物车效果</a></div>
		</li>
        <li>
			<div><a href="ZhuCe/index.html"><img src="./img2/zuoye4.png" alt=""></a></div>
			<div class="dt"><a href="ZhuCe/index.html">作品4:使用登录页面的表单验证</a></div>
		</li>
        <li>
			<div><a href="register/index.html"><img src="./img2/zuoye5.png" alt=""></a></div>
			<div class="dt"><a href="register/index.html">作品5:使用双向绑定实现用户注册页面（综合性实验）</a></div>
		</li>
        <li>
			<div><a href="menu/index.html"><img src="./img2/zuoye7.png" alt=""></a></div>
			<div class="dt"><a href="menu/index.html">作品7:下拉菜单过渡动画的实现</a></div>
		</li>
	</ul>
</body>
<html>